{% extends "base/base.html" %}

{% block sidebar %}
{% include "topic/markdown.html" %}
{% include "topic/create_note.html" %}
{% endblock %}

{% block content %}
<div class="panel">
  <div class="header">
    <ol class="breadcrumb">
      <li><a href="/">主页</a><span class="divider">/</span></li>
      <li class="active">发布话题</li>
    </ol>
  </div>
  <div class="inner post">
    <form id="create_topic_form" action="{{ url_for('main.topic_create') }}" method="post">
      <fieldset>
        <span class="tab-selector">选择版块：</span>
        <select name="tab" id="tab-value">
          <option value="">请选择</option>
          {% for tag in tags %}
            <option value="tag.id">{{ tag.display_name }}</option>
          {% endfor %}
        </select>

        <span id="topic_create_warn"></span>
        <textarea autofocus="" class="span9" id="title" name="title" rows="1" placeholder="标题字数 10 字以上"></textarea>

        <div class="markdown_editor in_editor">
          <div class="markdown_in_editor">
            <textarea class="editor" name="t_content" rows="20" placeholder="文章支持 Markdown 语法, 请注意标记代码" style="display: none;"></textarea>
            <div class="editor-toolbar"><a class="eicon-bold"></a><a class="eicon-italic"></a><i class="separator">|</i><a
                class="eicon-quote"></a><a class="eicon-unordered-list"></a><a class="eicon-ordered-list"></a><i class="separator">|</i><a
                class="eicon-link"></a><a class="eicon-image"></a><i class="separator">|</i><a class="eicon-info" href="http://lab.lepture.com/editor/markdown"
                target="_blank"></a><a class="eicon-preview"></a><a class="eicon-fullscreen"></a></div>
            <div class="CodeMirror cm-s-paper">
              <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 9.5px; left: 4px;"><textarea
                  style="position: absolute; padding: 0px; width: 1px; height: 1em; outline: currentcolor none medium; font-size: 4px;"
                  autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" wrap="off"></textarea></div>
              <div class="CodeMirror-hscrollbar" style="left: 0px;">
                <div style="height: 1px;"></div>
              </div>
              <div class="CodeMirror-vscrollbar">
                <div style="width: 1px;"></div>
              </div>
              <div class="CodeMirror-scrollbar-filler"></div>
              <div class="CodeMirror-gutter-filler"></div>
              <div class="CodeMirror-scroll" tabindex="-1" draggable="true">
                <div class="CodeMirror-sizer" style="min-width: 41px; margin-left: 0px; min-height: 36px;">
                  <div style="position: relative; top: 0px;">
                    <div class="CodeMirror-lines">
                      <div style="position: relative; outline: currentcolor none medium;">
                        <div class="CodeMirror-measure">
                          <pre><span>​</span></pre>
                        </div>
                        <div style="position: relative; z-index: 1; display: none;"></div>
                        <div class="CodeMirror-code" style="">
                          <pre>&nbsp;</pre>
                        </div>
                        <div class="CodeMirror-cursor" style="left: 4px; top: 5.5px; height: 17px;">&nbsp;</div>
                        <div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none;">&nbsp;</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="position: absolute; height: 30px; width: 1px; top: 36px;"></div>
                <div class="CodeMirror-gutters" style="display: none; height: 450px;"></div>
              </div>
            </div>
            <div class="editor-statusbar"><span class="lines">0</span><span class="words">0</span><span class="cursor">0:0</span></div>

            <div class="editor_buttons">
              <input type="submit" class="span-primary submit_btn" data-loading-text="提交中" value="提交">
            </div>
          </div>

        </div>

        <input type="hidden" id="topic_tags" name="topic_tags" value="">
        <input type="hidden" name="_csrf" value="1zqq1Jny-DFMcnleKcqjnXiNjfoQDfLEW9Mk">
      </fieldset>
    </form>
  </div>

</div>

<!-- markdown editor -->
<script src="//static2.cnodejs.org/public/editor.min.08791783.min.js"></script>


<script>
  (function () {
    var editor = new Editor();
    editor.render($('.editor')[0]);

    // 版块选择的检查，必须选择
    $('#create_topic_form').on('submit', function (e) {
      var tabValue = $('#tab-value').val();
      if (!tabValue) {
        alert('必须选择一个版块！');
        $('.submit_btn').button('reset');
        $('.tab-selector').css('color', 'red');
        return false;
      }
    });
    // END 版块选择的检查，必须选择

    // 选择招聘版块时，给出提示
    $('#tab-value').on('change', function () {
      var $this = $(this);
      var value = $this.val();
      var warnMsg = '';
      if (value === 'job') {
        warnMsg = '<strong>为避免被管理员删帖，发帖时请好好阅读<a href="http://cnodejs.org/topic/541ed2d05e28155f24676a12" target="_blank">《招聘帖规范》</a></strong>';
      } else if (value === 'ask') {
        warnMsg = '<strong>提问时，请遵循 <a href="https://gist.github.com/alsotang/f654af8b1fff220e63fcb44846423e6d" target="_blank">《提问的智慧》</a>中提及的要点，以便您更接收到高质量回复。</strong>'
      }
      $('#topic_create_warn').html(warnMsg);
    });
    // END 选择招聘版块时，给出提示
  })();
</script>
{% endblock %}